<script setup lang="ts">
import { ref } from 'vue'
import { useIndexStore } from '@/store'
const dialog = ref(false)

const form = reactive({
  qymc: '',

  ssgl: '',
  ssllSw: '',
  ssllZq: '',
  drYdl: '',
  drysl: '',
  nnhmzl: '',

  drtpfzl: '',
  ndtpfzl: '',
  tpfqd: '',
  tjpl: '',
  tye: '',
})

watch(dialog, (bool) => {
  if (bool) {
    queryQyBpInfo({ qyId: useIndexStore().mapActiveQyId }).then((res) => {
      for (const key in form) {
        form[key] = res[key] !== null ? res[key] : '--'
      }
    })
  }
})
</script>

<template>
  <div class="flex flex-col items-center">
    <div
      v-if="dialog"
      class="position-absolute top--260px w-620px h-260px rounded-4px"
      style="background-color: rgba(16, 16, 52, 0.7)"
    >
      <div class="h-50px lh-50px text-18px font-bold text-center text-[#fff]">
        {{ form.qymc }}
      </div>
      <hr class="ml-20px mr-20px bg-[rgba(248,248,248,0.24)]" />
      <div class="flex">
        <div class="flex-1 ml-20px">
          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              实时功率(电):
              <span>{{ form.ssgl }}</span>
            </div>
            <span>kW</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              瞬时流量(水):
              <span>{{ form.ssllSw }}</span>
            </div>
            <span>t/h</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              瞬时流量(蒸汽):
              <span>{{ form.ssllZq }}</span>
            </div>
            <span>t/h</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              当日用电量:
              <span>{{ form.drYdl }}</span>
            </div>
            <span>万kWh</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              当日用水量:
              <span>{{ form.drysl }}</span>
            </div>
            <span>万t</span>
          </div>

          <div class="flex items-center text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              当日综合能耗总量:
              <span>{{ form.nnhmzl }}</span>
            </div>
            <span>万tce</span>
          </div>
        </div>

        <div class="w-1px bg-[rgba(248,248,248,0.24)]"></div>

        <div class="flex-1 ml-20px">
          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              当日碳排放总量:
              <span>{{ form.drtpfzl }}</span>
            </div>
            <span>万t</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              年度碳排放总量:
              <span>{{ form.ndtpfzl }}</span>
            </div>
            <span>万t</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              碳排强度:
              <span>{{ form.tpfqd }}</span>
            </div>
            <span>t/万元</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              碳减排量:
              <span>{{ form.tjpl }}</span>
            </div>
            <span>万t</span>
          </div>

          <div class="flex items-center mb-8px text-[#fff]">
            <i class="inline-block w-8px h-8px mr-8px rounded-4px bg-[#3AB779]"></i>
            <div class="w-180px">
              碳余额:
              <span>{{ form.tye }}</span>
            </div>
            <span>万t</span>
          </div>
        </div>
      </div>
    </div>

    <div class="sign-containter" @click="dialog = !dialog">
      <span>{{ useIndexStore().mapActiveQyMc }}</span>
    </div>
  </div>
</template>

<style scoped>
.sign-containter {
  color: green !important;
  padding: 10px 15px;
  background-image: url('@/assets/image/qybck.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.sign-containter span {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 2px 2px 4px #000000;
}
</style>
